<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 完整开发教程</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            overflow: hidden;
        }

        #canvas-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        #webgl-canvas {
            display: block;
            cursor: grab;
        }

        #webgl-canvas:active {
            cursor: grabbing;
        }

        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            z-index: 100;
            text-align: center;
        }

        #loading.hidden {
            display: none;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #fff;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #info-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            max-width: 300px;
            z-index: 10;
        }

        #controls {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            border-radius: 8px;
            z-index: 10;
        }

        .control-group {
            margin-bottom: 10px;
        }

        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .control-group input, .control-group select {
            width: 100%;
            padding: 5px;
            border: none;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.9);
        }

        .control-group button {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 4px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            margin-top: 5px;
        }

        .control-group button:hover {
            background: #45a049;
        }

        #stats {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="canvas-container">
        <canvas id="webgl-canvas"></canvas>
        
        <div id="loading">
            <div class="spinner"></div>
            <div>加载中...</div>
        </div>

        <div id="info-panel">
            <h3>Three.js 完整开发教程</h3>
            <p><strong>控制说明：</strong></p>
            <ul>
                <li>鼠标左键：旋转视角</li>
                <li>鼠标右键：平移视角</li>
                <li>滚轮：缩放</li>
                <li>点击物体：选中高亮</li>
                <li>键盘 1-5：切换场景</li>
            </ul>
        </div>

        <div id="controls">
            <div class="control-group">
                <label>场景选择</label>
                <select id="scene-selector">
                    <option value="basic">基础场景</option>
                    <option value="lighting">光照演示</option>
                    <option value="materials">材质对比</option>
                    <option value="animation">动画效果</option>
                    <option value="postprocessing">后处理</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>环境光强度</label>
                <input type="range" id="ambient-intensity" min="0" max="2" step="0.1" value="0.4">
            </div>
            
            <div class="control-group">
                <label>方向光强度</label>
                <input type="range" id="directional-intensity" min="0" max="3" step="0.1" value="1">
            </div>
            
            <div class="control-group">
                <button id="toggle-wireframe">切换线框模式</button>
            </div>
            
            <div class="control-group">
                <button id="toggle-shadows">切换阴影</button>
            </div>
            
            <div class="control-group">
                <button id="add-object">添加随机物体</button>
            </div>
            
            <div class="control-group">
                <button id="reset-scene">重置场景</button>
            </div>
        </div>

        <div id="stats">
            <div>FPS: <span id="fps">0</span></div>
            <div>Objects: <span id="object-count">0</span></div>
            <div>Triangles: <span id="triangle-count">0</span></div>
        </div>
    </div>

    <!-- 主应用脚本 (ES6 模块) -->
    <script src="main.js" type="module"></script>
</body>
</html>